import React, { Component } from 'react';
import Chart from 'react-apexcharts';
import DataJSON from "../../data/data.json";

export default class LineTest extends Component {

  constructor(porps){
    super(porps);
    this.state = {
      options: {
        chart: {
          id: 'apexchart-example',
          height: 380,
          width: "100%"
        },
        xaxis: {
          type: "datetime"
        },
        annotations: {
          yaxis: [
            {
              y: 8,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Max'
              }
            },
            {
              y: 4,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Y-axis annotation on 8800'
              }
            },
          ]
        }
      },
      series: [{
        name: 'h2o_feet',
        data: DataJSON.coyote_creek.h2o_feet.datas.slice(0,239)
      }] 
    }

  }

  render() {
    return (
        <Chart options={this.state.options} series={this.state.series} type="line" width={500} height={320} />
    )
  }
}
